<script setup>
import { useRoute } from 'vue-router';
import { useRouter } from 'vue-router';
import { ref, onMounted } from 'vue';
import { getPracticeList } from '@/api/index';
const route = useRoute();
const router = useRouter();
const pathParams = route.params;
const pathId = ref(null);
pathId.value = pathParams.id;

const typeMap = ref({
  0: '单选题',
  1: '多选题',
  2: '判断题'
})

const loading = ref(true);
const listData = ref([]);
const getPracticeListData = async () => { 
  const resData = (await getPracticeList(pathId.value)).data;
  listData.value = resData.questionList;
  loading.value = false;
}

onMounted(() => { 
  getPracticeListData();
})

const num = ref(1);
const swipeRef = ref(null);
const showContent = ref(false);
/* 选择逻辑
* isAnswered 判断是否已经回答
* 0：未回答，1：正确，2：错误
**/
const selectOneItem = ($event, item, item2, index, i) => {
  if (item.isAnswered === 1 || item.isAnswered === 2) return;
  // 单选题
  if (item.questionType === '0'|| item.questionType === '2' ) { 
    if (item2.rightAnswer) {
      item.userAnswer = i;
      item.isAnswered = 1;
      $event.currentTarget.classList.add('right');
    } else {
      item.isAnswered = 2;
      $event.currentTarget.classList.add('wrong');
      showContent.value = true;
    }
  } else {
    // 多选题
    // 统计正确答案个数
    const rightLength = item.answerOptions.filter(obj => obj.rightAnswer === true).length;
    if (item.userAnswer !== undefined) { 
      if (item.userAnswer.length < rightLength) {
        item.userAnswer.push(i);
      }
    } else {
      item.userAnswer = [i];
    }
    if (item2.rightAnswer) {
      $event.currentTarget.classList.add('right');
      if (item.userAnswer.length === rightLength) {
        item.isAnswered = 1;
      }
    } else {
      $event.currentTarget.classList.add('wrong');
      item.isAnswered = 2;
      showContent.value = true;
    }
  }
  isFinished();
}

// 滑动逻辑,判断当前答题是否正确，是否显示正确答案
const onChange = (e) => {
  num.value = e + 1;
  showContent.value = (listData.value[e].isAnswered === 2);
  swipeRef.value.resize();
}

const isFinished = () => {
  if (listData.value.filter(obj => obj.isAnswered === 0 || obj.isAnswered === undefined).length === 0) {
    showConfirmDialog({
      message: '恭喜您完成本章练习！',
      confirmButtonText:'退出练习',
    }).then(() => {
      router.push('/');
    }).catch(() => { 

    })
  }
}

const isOut = () => { 
  showConfirmDialog({
    message: '是否确定退出练习？',
  }).then(() => {
    router.push('/');
  }).catch(() => {
    console.log('取消退出练习');
  });
}
const nextPage = () => {
  swipeRef.value.next();
}

const prePage = () => {
  swipeRef.value.prev();
}
</script>

<template>
  <div class="btn-box">
    <span>{{ num }}/{{ listData.length }}</span>
    <van-button size="small" type="primary" @click="isOut()">退出练习</van-button>
  </div>
  <van-skeleton title :row="6" :loading="loading">
    <van-swipe ref="swipeRef" lazy-render :show-indicators="false" :stop-propagation="false" @change="onChange">
      <van-swipe-item v-for="(item, index) in listData" :key="index">
        <div class="oneItem" style="padding:0 1rem;">
          <!-- 选项列表 -->
          <div class="que-one">
            <p><van-tag :color="item.questionType === '0' ? '#67C23A' : '#E6A23C'">{{ typeMap[item.questionType]
                }}</van-tag>&nbsp; {{ index+1 }}、{{ item.questionContent }}</p>
            <ul>
              <li v-for="(item2, i) in item.answerOptions" :key="i"
                @click="selectOneItem($event, item, item2, index, i)">
                <span>{{ item2.label }}</span>
              </li>
            </ul>
          </div>
          <div class="flexbox">
            <van-button plain type="success" size="small" @click="prePage" v-if="num !== 1">上一题</van-button>
            <van-button plain type="success" size="small" @click="nextPage"
              v-if="num !== listData.length">下一题</van-button>
          </div>
          <!-- 显示正确答案明细 -->
          <div v-if='showContent'>
            <div>
              正确答案：
              <p v-for="(obj, index) in item.answerOptions" :key="index">
                <span v-if="obj.rightAnswer">{{ obj.label }}</span>
              </p>
            </div>
            <p>解析：参与书《{{ item.refBook }}》，{{ item.refLevel2 }}--{{ item.refLevel3 }}--{{ item.refLevel1
              }}</p>
            <p>详情：{{ item.refContent }}</p>
          </div>
        </div>
      </van-swipe-item>
    </van-swipe>
  </van-skeleton>
</template>



<style lang="scss" scoped>
.btn-box{
  padding: .5rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.van-swipe{
  width: 100%;
  height: auto;
  img{
    width: 100%;
  }
}
.flexbox {
  padding: .5rem 1rem;
  display: flex;
  justify-content: flex-end;

  button {
    margin-left: .5rem;
  }
}
.que-one{
  ul {
    padding: 1rem;
    color: #58727e;
    li {
      padding: .5rem;
      margin-bottom: .5rem;
      background-color: #FAFCFF;
      border-radius: 6px;
      transition: all .3s;
      &.right{
        color: #fff;
        background-color: #07c160;
      }
      &.wrong{
        color: #fff;
        background-color: #ee0a24;
      }
    }
  }
}
</style>